<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useAppStore } from '../stores/app.js'
const appState = useAppStore()
const collapseState = ref([])
const loading = ref(false)
const data = reactive({
  fertilization: false,
  pk: false,
  fertilizationPosi: '',
  receivePosi: '',
})
const taskList = reactive([
  {
    text: '限时领取5000肥料礼包',
    value: true,
    num: 1,
  },
  {
    text: '逛好物最高得2000肥料',
    value: true,
    num: 1,
  },
  {
    text: '看精选商品得1500肥料',
    value: true,
    num: 3,
  },
  {
    text: '逛重庆好货领300肥料',
    value: true,
    num: 1,
  },
  {
    text: '逛优选好物领1000肥料',
    value: true,
    num: 1,
  },
  {
    text: '逛助农好货得肥料',
    value: true,
    num: 1,
  },
  {
    text: '逛一逛支付宝会员',
    value: true,
    num: 1,
  },
  {
    text: '看助农故事领100肥料',
    value: true,
    num: 1,
  },
  {
    text: '逛一逛余额宝10周年',
    value: false,
    num: 1,
  },
  {
    text: '逛一逛蚂蚁庄园',
    value: true,
    num: 1,
  },
  {
    text: '逛一逛蚂蚁森林',
    value: true,
    num: 1,
  },
  {
    text: '去积攒芝麻粒',
    value: true,
    num: 1,
  },
  {
    text: '去天猫攒福气兑红包',
    value: true,
    num: 1,
  },
  {
    text: '成功打开立得100肥料',
    note: '快手极度版',
    value: false,
    num: 1,
  },
  {
    text: '逛逛淘宝芭芭农场',
    value: true,
    num: 1,
  },
  {
    text: '去点淘赚元宝提现',
    value: false,
    num: 1,
  },
  {
    text: '逛一逛UC浏览器',
    value: false,
    num: 1,
  },
  {
    text: '去蚂蚁森林神奇海洋',
    value: true,
    num: 1,
  }
])


onMounted(() => {
  let zhifubao = JSON.parse(localStorage.getItem('zhifubao'))
  if (zhifubao) {
    data.fertilizationPosi = zhifubao.fertiliPosition
    data.receivePosi = zhifubao.receivePosition
  }




})


const changeCheckbox = (val) => {
  // console.log(val);

}

function countOccurrences(str) {
  let count = 0;
  for (let i = 0; i < str.length; i++) {
    if (str.charAt(i) === ',') {
      count++;
    }
  }
  return count;
}

const xyPosi = (str) => {
  if (!str) {
    return ''
  }


  let count = countOccurrences(str)
  if (count != 1) {
    Snackbar.warning('格式错误,使用默认坐标')
    return ''
  }

  let arr = str.split(',')
  return {
    x: arr[0],
    y: arr[1]
  }
}


const baBaNongChangScript = () => {
  let fertiliPosition = xyPosi(data.fertilizationPosi)
  let receivePosition = xyPosi(data.receivePosi)

  if (fertiliPosition && receivePosition) {
    localStorage.setItem('zhifubao', JSON.stringify({
      fertiliPosition: data.fertilizationPosi,
      receivePosition: data.receivePosi
    }))
  }
  let param = JSON.stringify({
    point: {
      fertiliPosition,
      receivePosition
    },
    taskList: taskList
  })
  appState.sendAndroid('AndroidStartBaBaNongChangScript', param, (data)=>{
    if(parseInt(data)){
      Snackbar('脚本已运行')
    }
  })
}

const baBaNongChangUpScript = () => {
  if (appState.app.loading) return
  appState.upScript('baBaNongChang')
}
</script>

<template>
  <div class="pay">
    <var-card title="芭芭农场">
      <template #subtitle>
        <div class="card-subtitle">
          因农场的特殊性，本脚本会时常更新，必要时请点击下方更新按钮。施肥、领取肥料需坐标数据，内部有默认坐标数据部分机型无法使用，可通过工具里面的脚本来获取坐标
        </div>
      </template>
      <template #description>
        <div class="card-content">
          <!-- <var-cell border-offset="0">
            自动施肥
            <template #extra>
              <var-switch v-model="data.fertilization" @click="data.fertilization = !data.fertilization" />
            </template>
          </var-cell>
          <var-cell border-offset="0">
            PK
            <template #extra>
              <var-switch v-model="data.pk" @click="data.pk = !data.pk" />
            </template>
          </var-cell> -->
          <var-cell border-offset="0">
            施肥坐标
            <template #extra>
              <var-input class="card-input" placeholder="请输入施肥坐标;例如：551,1942" v-model="data.fertilizationPosi" />
            </template>
          </var-cell>
          <var-cell border-offset="0">
            领取肥料坐标
            <template #extra>
              <var-input class="card-input" placeholder="请输入领取肥料坐标;例如：958,1694" v-model="data.receivePosi" />
            </template>
          </var-cell>
          <var-collapse v-model="collapseState" :elevation="false">
            <var-collapse-item title="任务列表" name="1">
              <div v-for="(item, index) in taskList" :key="index"><var-radio @change="changeCheckbox"
                  v-model="item.value">{{ item.text }} {{ item.note ? ('---' + item.note) : '' }}</var-radio></div>
            </var-collapse-item>
          </var-collapse>

          <div class="btn-box">
            <var-button class="btn" type="primary" @click="baBaNongChangUpScript">更新</var-button>
            <var-button class="btn" type="primary" @click="baBaNongChangScript">启动</var-button>
          </div>
        </div>
      </template>
    </var-card>
  </div>
</template>


<style lang='scss' scoped>
.pay {
  padding: 20px;

  .var-card {
    margin: 10px 0;
    opacity: 0.7;

    .card-subtitle{
      padding: 10px;
      font-size: 12px;
    }

    .card-input {
      width: 200px;
    }

    .radio {
      display: block;
    }

    .btn-box {
      display: flex;
      justify-content: space-around;
      margin-top: 10px;

      .btn {
        width: 30%;
      }
    }

  }

}
</style>